<script>
  const handler = (event: KeyboardEvent) => {
    if (event.code !== 'F12') return
    document.removeEventListener('keydown', handler)

    // show glitch only once. Do not use cookie / LS as it too obvious to debug
    indexedDB.open('db').onupgradeneeded = () => {
      document.body.classList.add('glitch')

      setTimeout(() => {
        document.body.classList.remove('glitch')
        // hide log source
        setTimeout(
          eval,
          0,
          // hide from search by sources
          "console.log('H_a_v_e_ _a_ _n_i_c_e_ _d_e_b_u_g_!')".replace(
            /\_/g,
            '',
          ),
        )

        /*
        What are you looking for?
        The missed answer?
        You was debug before
        And here another.

        I'm kidding, have some fun
        And hack the feature.
        To make things done
        You need go deeper.
      */
      }, 3000)
    }
  }
  document.addEventListener('keydown', handler)
</script>
<style is:global>
  body.glitch:before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1;
    background: url(/favicon.svg);
    background-size: 0;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    pointer-events: none;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
  }

  @media (prefers-reduced-motion: no-preference) {
    body.glitch:before {
      opacity: 0;
      animation-name: glitch;
    }
  }

  @keyframes glitch {
    30% {
      opacity: 1;
      background-size: 80vmin;
    }
    50% {
      opacity: 1;
      background-size: 80vmin;
    }

    50% {
      transform: scale(1);
      filter: invert(0);
    }
    51% {
      transform: scale(2);
      filter: invert(1);
    }
    55% {
      transform: scale(2);
      filter: invert(1);
    }
    56% {
      transform: scale(1);
      filter: invert(0);
    }

    58% {
      transform: scale(1);
      filter: invert(0);
    }
    59% {
      transform: scale(1.4);
      filter: invert(1);
    }
    61% {
      transform: scale(1.4);
      filter: invert(1);
    }
    62% {
      transform: scale(1);
      filter: invert(0);
    }

    65% {
      transform: scale(1);
      filter: invert(0);
    }
    67% {
      transform: scale(1.4);
      filter: invert(1);
    }
    69% {
      transform: scale(1.4);
      filter: invert(1);
    }
    70% {
      transform: scale(1);
      filter: invert(0);
    }

    90% {
      transform: scale(1);
      filter: invert(0);
    }
    91% {
      transform: scale(2.5);
      filter: invert(1);
    }
    98% {
      transform: scale(2.5);
      filter: invert(1);
    }
    99% {
      transform: scale(1);
      filter: invert(0);
    }

    99% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      background-size: 80vmin;
    }
  }
</style>
